<template>
  <div class="pressureTestWrap">
    <div class="titleBar">
      <b>压力测试</b>
      <i>看看压力有多大，调整心态</i>
    </div>
    <div class="issueBox">
      <p>压力既可以是你生活的助手也可以变成生活的阻碍。PSTR心理压力测试，帮助你了解自己面临的心理压力程度。</p>
      <span class="score">频率：总是-４　经常-３　有时-２　很少-１　从未-０</span>
      <div class="contentBox">
        <div v-for="(item, index) in issueList" :key="index">
          <div v-show="index === tabNum">
            <div class="titles">
              <i>{{ index * 1 + 1 }}</i>
              <b>/{{ issueList.length }}.</b><b>{{ item }}</b>
            </div>
            <div class="answer flex-h">
              <span class="flex1" @click="clcyes(index, '4')"><img :src="tabindex == '4' ? img_s : img_n" alt="" /><b>4</b></span>
              <span class="flex1" @click="clcyes(index, '3')"><img :src="tabindex == '3' ? img_s : img_n" alt="" /><b>3</b></span>
              <span class="flex1" @click="clcyes(index, '2')"><img :src="tabindex == '2' ? img_s : img_n" alt="" /><b>2</b></span>
              <span class="flex1" @click="clcyes(index, '1')"><img :src="tabindex == '1' ? img_s : img_n" alt="" /><b>1</b></span>
              <span class="flex1" @click="clcyes(index, '0')"><img :src="tabindex == '0' ? img_s : img_n" alt="" /><b>0</b></span>
            </div>
            <span v-if="tabNum < issueList.length - 1" class="btn" @click="next(index)">下一题</span>
            <div v-else @click="saveRecord(index)" class="btn">提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { infoTopicComment } from '~/api/identity'
// import { XTextarea } from 'vux'
// import ls from 'store2'
var issueAry = [
  '我受背疼之苦',
  '我的睡眠不足、且睡不安稳',
  '我有头疼',
  '我额部疼痛',
  '若须等候，我会不安',
  '我的后颈感到疼痛',
  '我比多数人更神经紧张',
  '我很难入睡',
  '我的头感到紧或疼',
  '我的胃有病',
  '我对自己没有信心',
  '我对自己说话',
  '我忧虑财务问题',
  '与人见面时，我会窘怯',
  '我怕发生可怕的事',
  '白天我觉得累',
  '下午我感到喉咙痛，但并非由于染上感冒',
  '我心情不安，无法静坐',
  '我感到非常口干',
  '我心脏有病',
  '我觉得自己不是很有用',
  '我吸烟',
  '我肚子不舒服',
  '我觉得不快乐',
  '我流汗',
  '我喝酒',
  '我很自觉',
  '我觉得自己像四分五裂',
  '我的眼睛又酸又累',
  '我的腿或脚抽筋',
  '我的心跳过速',
  '我怕结识人',
  '我手脚冰冷',
  '我患便秘',
  '我未经医师指示使用各种药',
  '我发现自己很容易哭',
  '我消化不良',
  '我会咬指甲',
  '我耳中有嗡嗡声',
  '我小便频密',
  '我有胃溃疡',
  '我有皮肤方面的病',
  '我的咽喉很疼',
  '我有十二指肠溃疡病',
  '我担心我的工作',
  '我口腔溃烂',
  '我为琐事忧虑',
  '我呼吸浅促',
  '我觉得胸部紧迫',
  '我发现很难做决定',
]
export default {
  components: {},
  data() {
    return {
      tabindex: '',
      tabNum: 0,
      img_s: require('~/static/images/icon_radio_s.png'),
      img_n: require('~/static/images/search_icon_nor.png'),
      issueList: issueAry,
      mbtiScore: [],
    }
  },
  watch: {},
  mounted() {},
  methods: {
    saveRecord(indexs) {
      if (!this.mbtiScore[indexs]) {
        this.$vux.toast.text('您还未做选择')
        return
      }
      let sum = this.mbtiScore.join(',')
      this.$router.push({
        path: '../sxAssess/testResult?id=2&score=' + sum,
      })
    },
    clcyes(indexs, score, check) {
      this.tabindex = score
      this.chooseStr = score
      this.mbtiScore[indexs] = score
    },
    next(indexs) {
      if (!this.mbtiScore[indexs]) {
        this.$vux.toast.text('您还未做选择')
        return
      }
      this.tabNum = indexs + 1
      this.tabindex = ''
    },
  },
}
</script>

<style lang="less" scoped>
.pressureTestWrap {
  width: 6.9rem;
  height: auto;
  padding-bottom: 0.5rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 0.2rem 0px rgba(204, 204, 204, 0.3);
  border-radius: 0.2rem;
  margin: 0.3rem auto;
  //   bg_luqu
  .titleBar {
    height: 1.8rem;
    width: 100%;
    background: url('~/static/images/bg_yali.png') no-repeat;
    background-size: 100% 100%;
    padding-left: 0.3rem;
    padding-top: 0.4rem;
    b,
    i {
      display: block;
    }
    b {
      font-size: 0.4rem;
      font-weight: 600;
      color: rgba(255, 255, 255, 1);
    }
    i {
      font-size: 0.28rem;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
  .issueBox {
    height: auto;
    padding: 0.3rem;
    box-sizing: border-box;
    p {
      font-size: 0.26rem;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      line-height: 0.45rem;
    }
    .score {
      display: block;
      height: 0.8rem;
      background: rgba(247, 247, 250, 1);
      border-radius: 0.1rem;
      text-align: center;
      line-height: 0.8rem;
      font-size: 0.24rem;
      font-weight: 400;
      color: rgba(34, 34, 34, 1);
      margin-top: 0.3rem;
    }
    .contentBox {
      padding-top: 0.3rem;
      border-top: 0.01rem solid rgba(229, 232, 237, 1);
      margin-top: 0.3rem;
      .titles {
        i,
        b {
          font-size: 0.34rem;
          font-weight: 600;
          color: rgba(34, 34, 34, 1);
        }
      }
      .answer {
        margin-top: 0.5rem;
        span {
          text-align: left;
          img {
            width: 0.28rem;
            height: 0.28rem;
          }
          b {
            font-size: 0.3rem;
            font-weight: 600;
            color: rgba(34, 34, 34, 1);
            margin-left: 0.1rem;
          }
        }
      }
      .btn {
        width: 100%;
        height: 0.88rem;
        background: rgba(255, 173, 13, 1);
        border-radius: 0.5rem;
        text-align: center;
        line-height: 0.88rem;
        font-size: 0.3rem;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        margin-top: 0.5rem;
        display: block;
      }
    }
  }
}
</style>
